<script setup>
  import { computed, ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { message } from "ant-design-vue";
  import ConfirmModal from "@/components/ConfirmModal.vue";
  import SwitchExpressType from "@/views/order/components/SwitchExpressType.vue";
  import { cancelOrderApi, delOrderApi, takeOrderApi, switchExpressTypeApi } from "@/api/index.js";
  const emit = defineEmits(["actionSuccess"]);
  const props = defineProps(['order'])
  const router = useRouter();
  const switchExpressTypeRef = ref()
  const confirmRef = ref()
  const status = computed(() => {
    let label = ''
    switch (props.order.status) {
      case -1:
        label = '已取消'
        break
      case 0:
        label = '未支付'
        break
      case 1:
        label = '已支付'
        break
      case 3:
        label = '待发货'
        break
      case 4:
        label = '已发货'
        break
      case 5:
        label = '已收货'
        break
      case 6:
        label = '已完成'
        break
      default:
        label = undefined
    }
    return label
  })
  const modalTips = ref('')
  // 操作类型 1：取消订单；2：删除订单；3：确认订单；
  const actionsType = ref()
  // 显示提示弹窗
  const showConfirmModal = (type) => {
    if (type === 1) modalTips.value = '是否取消该订单？'
    else if (type === 2) modalTips.value = '是否删除该订单？'
    else modalTips.value = '您已收到该订单商品？'
    actionsType.value = type
    confirmRef.value.open()
  }
  // 操作
  const actions = () => {
    if (actionsType.value === 1) cancelOrder()
    else if (actionsType.value === 2) deleteOrder()
    else confirmOrder()
  }
  // 切换自提方式
  const switchExpressType = (params) => {
    switchExpressTypeApi(params).then(() => {
      props.order.transport_type = params.transport_type
      message.success('修改成功')
      switchExpressTypeRef.value.close()
    })
  }
  // 取消订单
  const cancelOrder = () => {
    cancelOrderApi({order_id: props.order.id, order_cancel_cause: ''}).then((res) => {
      emit('actionSuccess')
      message.success('操作成功')
      confirmRef.value.close()
    }).catch((err) => message.error(err.msg))
  }
  // 删除订单
  const deleteOrder = () => {
    delOrderApi({order_id: props.order.id}).then((res) => {
      emit('actionSuccess')
      message.success('操作成功')
      confirmRef.value.close()
    }).catch((err) => message.error(err.msg))
  }
  // 订单确认收货
  const confirmOrder = () => {
    takeOrderApi({order_id: props.order.id}).then((res) => {
      emit('actionSuccess')
      message.success('操作成功')
      confirmRef.value.close()
    }).catch((err) => message.error(err.msg))
  }
  const nav = (name, zId) => router.push({name, query: {id: props.order.id, zId}})
</script>

<template>
  <div class="order-com">
    <a-card>
      <template #title> <div class="time"> {{ order?.create_time }} </div> </template>
      <template #extra> <a-tag color="pink" :bordered="false"> {{ status }} </a-tag> </template>
      <div class="order-item">
          <div class="shop-list" v-for="item in order.shop_lists">
            <div class="shop-info">
              <img :src="item.img" alt="" class="shop-logo">
              <div class="shop-name"> {{ item.name }} </div>
            </div>
            <div class="good-list">
              <div class="goods-item" v-for="(goods, gIndex) in item?.order_goods_lists" :key="goods.sku">
                <div class="box">
                  <img :src="goods?.thumb" alt="" class="goods-img"/>
                  <div class="goods-info">
                    <div class="goods-name"> {{ goods.goods_name }} </div>
                    <div class="goods-spec ellipsis"> 规格： {{ goods?.spece_value_title?goods?.spece_value_title:'默认规格' }} </div>
                    <div class="actions">
                      <template v-if="order.status ===1 || order.status ===3 || order.status ===4">
                        <div class="refund" v-if="goods?.refund_status === 0" @click="nav('refund', goods.id)"> 申请退款 </div>
                        <a-tag color="pink" v-else> 退款状态：{{ goods?.refund_status === 1 ?'待审核':goods?.refund_status === 2 ?'审核通过待退款':goods?.refund_status === 3 ?'审核驳回':goods?.refund_status === 4 ?'已退款':'已发货等待退款' }} </a-tag>
                      </template>
                    </div>
                  </div>
                </div>
                <div class="box mt">
                  <div class="goods-price">
                    <div class="new-price fh">  {{ goods.price }} </div>
                  </div>
                  <div class="num"> x{{ goods?.num }} </div>
                </div>
              </div>
            </div>
          </div>
      </div>
      <template #actions>
        <a-button size="small" @click="nav('orderDetail')"> 详情 </a-button>
        <a-button size="small" @click="showConfirmModal(2)"> 删除 </a-button>
        <a-button size="small" v-if="order.status === 0" @click="showConfirmModal(1)"> 取消 </a-button>
        <a-button size="small" v-if="order.status === 0" @click="switchExpressTypeRef.open(order)"> 提货方式 </a-button>
        <a-button size="small" v-if="(order.status === 5 || order.status === 6) && order?.have_comment === 0" @click="nav('evaOrder')"> 评价订单 </a-button>
        <a-button size="small" v-if="order.status === 4" @click="showConfirmModal(3)"> 确认收货 </a-button>
      </template>
    </a-card>
    <ConfirmModal ref="confirmRef" title="提示" :tips="modalTips" @confirm="actions"/>
    <SwitchExpressType ref="switchExpressTypeRef" @selected="switchExpressType" />
  </div>
</template>

<style scoped lang="scss">
  :deep(.ant-card-head) {
    height: 40px;
    min-height: 40px;
    border-color: #f8f8f8;
    .time {
      color: #999;
      font-size: 14px;
      font-weight: normal;
    }
  }
  :deep(.ant-card-body) {
    padding: 10px !important;
  }
  .order-item {
    gap: 10px;
    display: flex;
    flex-direction: column;
    .shop-info {
      gap: 5px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .shop-logo {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
      }
      .shop-name {
        font-size: 18px;
        font-weight: bold;
      }
    }
    .good-list {
      gap: 10px;
      display: flex;
      flex-direction: column;
      .goods-item {
        gap: 20px;
        display: flex;
        align-items: start;
        padding: 10px;
        border-radius: 10px;
        background-color: #f8f8f8;
        .box {
          display: flex;
          align-items: start;
          gap: 20px;
        }
        .goods-img {
          width: 100px;
          height: 130px;
          border-radius: 10px;
        }
        .goods-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 5px;
          .ellipsis {
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            //white-space: nowrap;
            word-break: break-all;
          }
          .goods-name {
            max-width: 470px;
            font-size: 16px;
            font-weight: bold;
          }
          .goods-spec, .shop-name {
            color: #999;
          }
          .actions {
            margin-top: 10px;
            .refund {
              color: #999;
              cursor: pointer;
              &:hover {
                color: var(--primary);
              }
            }
          }
        }
        :deep(.ant-input-number) {
          width: 40px;
        }
        :deep(.ant-input-number-group-addon) {
          background-color: transparent;
          border: none;
          padding: 0;
        }
        :deep(.ant-input-number-input) {
          text-align: center !important;
        }
        .ant-btn {
          width: 32px;
          height: 32px;
          padding: 0;
          color: #999;
          border: none;
          border-radius: 10px;
          background-color: #f1f1f5;
          display: flex;
          align-items: center;
          justify-content: center;
          &:hover {
            background-color: #e8e8f0;
          }
          .anticon {
            color: #242424;
            font-size: 16px;
          }
        }
        .goods-price {
          color: #999;
          font-size: 14px;
          font-weight: bold;
          display: flex;
          align-items: center;
          gap: 10px;
          .new-price, .old-price {
            white-space: nowrap;
          }
          .new-price {
            color: #f44;
            font-size: 18px;
          }
          .old-price {
            text-decoration: line-through;
          }
        }
      }

      @media (max-width: 750px) {
        .goods-item {
          display: block;
        }
        .mt {
          margin-top: 20px;
          justify-content: space-between;
        }
        .goods-name, .ellipsis {
          max-width: 100%;
        }
      }
    }
  }
  :deep(.ant-card-actions>li) {
    width: auto !important;
    margin: 5px 0;
  }
  :deep(.ant-card-actions) {
    border-color: #f8f8f8;
    display: flex;
    justify-content: end;
    gap: 10px;
    .ant-btn {
      color: #999;
      border-color: #333;
      border-radius: 20px;
    }
  }
</style>